import { useEffect, useState } from 'react';
import '../index.less';
import { Button, Space, Form, Table, Modal, Descriptions } from 'antd';
import usePageAccess from '@/components/usePageAccess';
import { Access } from '@umijs/max'
import { PAGINATION_CONFIG } from '@/constants';
import type { QueryStubListParams, Stub } from '../services';
import { StubStatus, queryStubList, StubType } from '../services'
import { useRequest } from 'ahooks';
import type { ColumnsType } from 'antd/es/table/interface';
import StubEditModal from './StubEditModal'
import type { StubEditModalProps } from './StubEditModal'

export interface StubModalProps {
  stationId?: string
  equipmentId?: string
  open: boolean
  onCancel?: () => void
}

const StubPage: React.FC<StubModalProps> = (props) => {
  const access = usePageAccess()
  const [searchForm] = Form.useForm<QueryStubListParams>()
  const [searchParams, setSearchParams] = useState<QueryStubListParams>({
    pageNum: 1, pageSize: 10,
  })
  const stubList = useRequest(() => queryStubList(searchParams), {
    ready: props.open,
    refreshDeps: [searchParams],
  })
  const [stubEditModalProps, setStubEditModalProps] = useState<StubEditModalProps>({
    open: false, stationId: '', equipmentId: '', type: 'look'
  })
  const [detailRecord, setDetailRecord] = useState<Stub>()

  const onStubModalCancel = (refresh?: boolean) => {
    if (refresh) stubList.refresh()
    setStubEditModalProps({open: false,  stationId: '', equipmentId: '', type: 'look'})
  }

  const openEditModal = (title: string, type: 'edit' | 'look', record?: Stub) => {
    setStubEditModalProps({
      type, open: true, title,
      stationId: props.stationId!,
      equipmentId: props.equipmentId!,
      stub: record
    })
  }

  const openDetailModal = (record: Stub) => {
    setDetailRecord(record)
  }

  const onCancel = () => {
    searchForm.resetFields()
    setSearchParams({pageNum: 1, pageSize: 10})
    props.onCancel?.()
  }

  const onOk = () => {

  }

  const columns: ColumnsType<Stub> = [
    {
      title: '枪编号',
      dataIndex: 'id',
      width: 120,
    },
    {
      title: '设备编号',
      dataIndex: 'equipmentId',
      width: 120,
    },
    {
      title: '场站名称',
      dataIndex: 'stationName',
    },
    {
      title: '最大功率(kw)',
      dataIndex: 'kw',
      width: 140,
    },
    {
      title: '枪状态',
      dataIndex: 'status',
      width: 120,
      render: val => val && StubStatus[val]
    },
    {
      title: '枪标准',
      dataIndex: 'standardType',
      width: 140,
      render: val => val ? StubType[val] : '--'
    },
    {
      title: '操作',
      dataIndex: 'id',
      width: 100,
      render: (id: number, record) => {
        return <Space>
          <a onClick={() => openDetailModal(record)}>详情</a>
          <a onClick={() => openEditModal('编辑枪信息', 'edit', record)}>编辑</a>
        </Space>
      }
    }
  ]

  useEffect(() => {
    if (props.open) {
      setSearchParams({
        pageNum: 1, pageSize: 10, equipmentId: props.equipmentId
      })
    }
  }, [props.open])
  
  return (
    <Modal
      title='枪列表'
      className='container'
      open={props.open}
      onCancel={onCancel}
      onOk={onOk}
      width={1200}
      footer={false}
    >
      <div className="card search-card">
        <Access accessible={!!access.add || true}>
          <div className="toolbar">
            <Space>
              <Button type='primary' onClick={() => openEditModal('添加枪信息', 'edit')}>添加枪信息</Button>
            </Space>
          </div>
        </Access>
      </div>
      <div className="card content-card">
        <Table<Stub>
          rowKey='id'
          loading={stubList.loading}
          dataSource={stubList.data?.data}
          columns={columns}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: stubList.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </div>
      <StubEditModal
        {...stubEditModalProps}
        onCancel={onStubModalCancel}
      />
      <Modal
        title='枪信息'
        open={!!detailRecord}
        footer={false}
        onCancel={() => setDetailRecord(undefined)}
      >
        <Descriptions column={1}>
          <Descriptions.Item label='枪编号'>{detailRecord?.id}</Descriptions.Item>
          <Descriptions.Item label='枪名称'>{detailRecord?.name}</Descriptions.Item>
          <Descriptions.Item label='最大功率(kW)'>{detailRecord?.kw}</Descriptions.Item>
          <Descriptions.Item label='额定电压下限(V)'>{detailRecord?.voltageBegin}</Descriptions.Item>
          <Descriptions.Item label='额定电压上限(V)'>{detailRecord?.voltageEnd}</Descriptions.Item>
          <Descriptions.Item label='枪标准'>{detailRecord?.standardType ? StubType[detailRecord.standardType] : '--'}</Descriptions.Item>
        </Descriptions>
      </Modal>
    </Modal>
  );
};

export default StubPage;
